<template>
  <div id="app">
    <div id="map"></div>
    <iframe id="iframe" src="http://wx.gisocn.com:6124/#/presentation?id=7b81b29a-bf41-4496-bca3-8c3a81b756e0"
      frameborder="0" class="insight-iframe"></iframe>
    <iframe id="iframe2" src="http://wx.gisocn.com:6124/#/presentation?id=9b47f4f5-f2b5-4084-b533-e1c4528d4a42"
      frameborder="0" class="insight-iframe2"></iframe>
  </div>
</template>

<script>
import Insight from "jinsight"
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Text, Stroke, Style } from "ol/style"
export default {
  name: 'App',
  data() {
    return {
      insight: null
    }
  },
  beforeCreate() {
    this.map = null
    this.layer = null
  },
  mounted() {
    // dom节点初始化
    this.insight = new Insight([{
      // insight定制的大屏ID
      id: "7b81b29a-bf41-4496-bca3-8c3a81b756e0",
      // iframe标签的id
      target: "iframe",
      // insight里的组件全部加载完毕
      onload: () => {
        console.log("左边的insight定制可视化加载完毕", "可以发送事件了")
      }
    }, {
      id: "9b47f4f5-f2b5-4084-b533-e1c4528d4a42",
      target: "iframe2",
      onload: () => {
        console.log("右边的insight定制可视化加载完毕", "可以发送事件了")
      }
    }])
    // 初始化地图
    this.initMap()
    // 初始化地图点击事件
    this.onClick()
    // 监听insight的name状态值的变更
    this.onName()
  },
  // 防止内存溢出
  beforeDestroy() {
    this.layer = null
    this.map = null
    this.insight.off("name")
  },
  methods: {
    // 初始化地图
    initMap() {
      this.layer = new VectorLayer({
        background: '#1a2b39',
        source: new VectorSource({
          projection: 'EPSG:4326',
          url: "china.json",
          format: new GeoJSON()
        }),
        style: function (feature) {
          const style = new Style({
            text: new Text({
              text: feature.get('name'),
              font: '30px Calibri,sans-serif',
              stroke: new Stroke({
                color: '#fff', width: 2
              }),
              textAlign: "center",
            }),
            stroke: new Stroke({
              borderColor: "#f8f8f8",
              borderWidth: 3,
            })
          })
          return style;
        },
      })
      this.map = new Map({
        target: 'map',
        layers: [this.layer],
        view: new View({
          center: [103.30976486206055, 36.029319763183594],
          zoom: 6,
          projection: 'EPSG:4326',
        })
      });
    },
    // 初始化地图点击事件
    onClick() {
      this.map.on('singleclick', e => {
        this.layer.getSource().getFeatures().forEach(feature => {
          var geo = feature.getGeometry();
          var isIn = geo.intersectsCoordinate(e.coordinate);
          if (isIn) {
            const province = feature.get('name')
            this.insight.emit("province", province)
          }
        })
      })
    },
    // 监听insight的name状态值的变更
    onName() {
      // 监听insight点击事件
      this.insight.on("name", value => {
        this.layer.getSource().getFeatures().forEach(fearure => {
          if (fearure.get('name') == value) {
            const pointer = fearure.get("cp")
            pointer && this.map.getView().setCenter(pointer)
            pointer && this.map.getView().setZoom(8)
          }
        })
      })
    }
  }
}
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.overButtons {
  position: absolute;
  right: 15px;
  top: 15px;
  background: rgba(0, 0, 0, .5);
  padding: 15px;
  border-radius: 8px;
  z-index: 1;
}

#map {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: #f8f8f8;
}

.insight-iframe {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 300px;
  height: 300px;
  z-index: 1;
  border-radius: 15px;
  background: rgba(0, 0, 0, .2);
}

.insight-iframe2 {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 300px;
  height: 300px;
  z-index: 1;
  border-radius: 15px;
  background: rgba(0, 0, 0, .2);
}
</style>
